<script setup lang="ts">
/*slideshow*/
let slideshow = document.getElementById('slideshow');
let item = document.querySelector('.slideshow__item');
let unit = document.querySelector('.slideshow__item-unit');
let units = document.querySelectorAll('.slideshow__item-unit');
let arrow_left = document.getElementById('slideshow__arrow-left');
let arrow_right = document.getElementById('slideshow__arrow-right');
let temp = 0;
let flag = false;
function invertflag(){
  flag = !flag;
}
arrow_left.addEventListener('click', function () {
  console.log(flag);
  if(!flag)
  { invertflag();
    console.log(flag);
    if (temp == 0 ) {
      temp = units.length - 1;
      item.style.right = temp * unit.offsetWidth + 'px';
    }
    else {
      item.style.right = (--temp) * unit.offsetWidth + 'px';
    }
    window.setTimeout(invertflag,1200);
  }

})
arrow_right.addEventListener('click', function () {

  if(!flag)
  {   invertflag()
    if (temp == units.length - 1) {
      item.style.right = 0 + 'px';
      temp = 0;
    }
    else {
      item.style.right = (++temp) * unit.offsetWidth + 'px';
    }
    setTimeout(invertflag,1200);
  }

})
window.addEventListener('resize',function(){
  item.style.right = temp * unit.offsetWidth + 'px';
})
</script>

<template>
  <div class="rside__content-top">
    <section class="rside__banner">
      <div class="banner__left">
        <div id="slideshow">
          <div class="slideshow__arrow">
            <div class="arrow-block">
              <div class="slideshow__arrow-left" id="slideshow__arrow-left"></div>
              <div class="slideshow__arrow-right" id="slideshow__arrow-right"></div>
            </div>
          </div>
          <div class="slideshow__item" style="right:0px;">
            <div class="slideshow__item-unit"></div>
            <div class="slideshow__item-unit"></div>
            <div class="slideshow__item-unit"></div>
            <div class="slideshow__item-unit"></div>
            <div class="slideshow__item-unit"></div>
          </div>

        </div>
      </div>
      <!--end of banner-left-->
      <div class="banner__right">
        <div class="banner__right-content">
          <ul class="banner__list">
            <li class="banner__list-unit"></li>
            <li class="banner__list-unit"></li>
            <li class="banner__list-unit"></li>
            <li class="banner__list-unit"></li>
          </ul>
        </div>
      </div>
    </section>
    <!--end of banner-->
  </div>
</template>

<style scoped lang="scss">

</style>